<template>
  <van-field
    v-model="selectVal"
    name="picker"
    :border="false"
    :label="label"
    :label-width="labelWidth"
    :placeholder="placeholder"
    :rules="rules"
    :required="required"
    :disabled="disabled"
    readonly
    clickable
    is-link
    @click="handleShowPicker"
  />
  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker show-toolbar :columns="columnsData" @confirm="onConfirm" @cancel="showPicker = false" />
  </van-popup>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
export default {
  props: {
    selectId: { type: Number, default: null },
    label: { type: String, default: '' },
    placeholder: { type: String, default: '请选择' },
    labelWidth: { type: String, default: '' },
    required: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    option: {
      type: Object,
      default: function () {
        return { label: 'label', value: 'value' }
      },
    },
    columns: {
      type: Array,
      default() {
        return []
      },
    },
    otherOrg: {
      type: Array,
      default() {
        return []
      },
    },
    rules: {
      type: Array,
      default() {
        return []
      },
    },
  },
  emits: ['getValue'],
  setup(props, ctx) {
    const state = reactive({
      selectVal: '',
      columnsData: [],
      columns: props.columns,
      labelWidth: props.labelWidth,
      label: props.label,
      placeholder: props.placeholder,
      showPicker: false,
      disabledVal: false,
      rules: props.rules,
      required: props.required,
    })

    // 值转换
    const changeValue = (value, isValue = true) => {
      if (value) {
        let result = ''
        for (let index = 0; index < props.columns.length; index++) {
          const item = props.columns[index]
          if (isValue) {
            if (props.otherOrg.length > 0) {
              let diffValue = item[props.option.label]
              props.otherOrg.forEach((v) => {
                if (item[v]) {
                  diffValue += `-${item[v]}`
                }
              })
              if (item[props.option.value] == value) {
                result = diffValue
              }
            } else {
              if (item[props.option.value] == value) {
                result = item[props.option.label]
              }
            }
          } else {
            if (item[props.option.label] == value) {
              result = item[props.option.value]
            }
            if (props.otherOrg.length > 0) {
              let diffValue = item[props.option.label]
              props.otherOrg.forEach((v) => {
                if (item[v]) {
                  diffValue += `-${item[v]}`
                }
              })
              if (diffValue == value) {
                result = item[props.option.value]
              }
            } else {
              if (item[props.option.label] == value) {
                result = item[props.option.value]
              }
            }
          }
        }
        return result || value
      }
    }

    const handleShowPicker = () => {
      if (!props.disabled) {
        state.showPicker = true
      }
    }

    const onConfirm = (value) => {
      state.selectVal = value
      state.showPicker = false
      ctx.emit('getValue', changeValue(value, false))
    }

    watch(
      () => props.columns,
      (newValue) => {
        if (props.otherOrg.length > 0) {
          state.columnsData = newValue.map((v) => {
            let result = v[props.option.label]
            props.otherOrg.forEach((item) => {
              if (v[item]) {
                result += `-${v[item]}`
              }
            })
            return result
          })
        } else {
          state.columnsData = newValue.map((v) => v[props.option.label])
        }
      },
      { immediate: true }
    )

    watch(
      () => props.selectId,
      (value) => {
        state.selectVal = changeValue(value)
      },
      { immediate: true }
    )

    return {
      ...toRefs(state),
      handleShowPicker,
      onConfirm,
      changeValue,
    }
  },
}
</script>

<style lang='less' scoped>
@import '@/common/style/mixin';
</style>
